<template>
  <component :is="type" v-bind="linkProps(to)">
    <slot></slot>
  </component>
</template>

<script setup lang="ts">
import { isExternal } from "/@ts/plugins/validate";
import {
  ref,
  reactive,
  defineEmits,
  onMounted,
  defineProps,
  computed,
} from "vue";



const props = defineProps({
  to: {
    type: [String, Object],
    required: true,
  },
});
const isExternalTool = computed(() => isExternal(props.to));
const type = computed(() => {
  if (isExternalTool.value) {
    return "a";
  }
  return "router-link";
});
const linkProps = (to: string) => {
  if (isExternalTool.value) {
    return {
      href: to,
      target: "_blank",
      rel: "noopener",
    };
  }
  return {
    to: to,
  };
};
</script>

<style scoped lang="scss">
a {
  text-decoration: none;
}
</style>
